<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<meta charset="utf-8">
<title>移动页面</title>
<style>
	*{
		margin:0;
		padding:0;
	}
	body{
		background:#ffffff !important;
	}
	#page1Main,#divIntr{
		text-align:center;
	}
	#page1Main .page1MainKiss{
		background:url(img/kiss.gif) center no-repeat;
		background-size:100px 100px;
		display:block;
		margin:0 auto;
	}
	#page1Main .ui-btn-icon-notext:after{
		    background-color: rgba(255,184,184,0);
	}
	#page1Main a:last-child{
		border-color:#93F0FF;
		margin-top:20px;
	}
	#page1Main .ui-btn-icon-notext,#divIntr .ui-btn-icon-notext{
		width: 200px;
		height:200px;
	}
	#page1Main .ui-btn-icon-notext.ui-corner-all,#divIntr .ui-btn-icon-notext.ui-corner-all{
		border-radius:200px;
	}
	/*
	#tranformBox{
		margin:0 auto;
		margin-top:80px;
		width:100px;
		height:100px;
		border:1px solid #BFBFBF;
		position:relative;
	}
	figure{
		
		width:50px;
		height:50px;
		border:1px solid #BFBFBF;
		display: block;
	    position: absolute;
		left:25px;
		top:25px;
	}
	#tranformBox figure:nth-child(1){
		transform: translate(40px,40px);
	}
	#tranformBox figure:nth-child(2){
		transform: translate(-40px,40px);
	}
	#tranformBox figure:nth-child(3){
		transform: translate(-40px,-40px);
	}
	#tranformBox figure:nth-child(4){
		transform: translate(40px,-40px);
	}*/
	#musicBk-box{
		margin:0 auto;
		width: 210px;
		height:210px;
		position:relative;
	}
	#musicBk{
		position:absolute;
		margin:0 auto;
		border:2px dashed #000000;
		width: 210px;
		height:210px;
		border-radius:210px;
		animation:myTwo 10s;
		-moz-animation:myTwo 10s;
		-webkit-animation:myTwo 10s;
		-o-animation:myTwo 10s;
		animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		animation-timing-function:linear;
		-moz-animation-timing-function:linear;
		-webkit-animation-timing-function:linear;
		-o-animation-timing-function:linear;
		animation-play-state:paused;
		-moz-animation-play-state:paused;
		-webkit-animation-play-state:paused;
		-o-animation-play-state:paused;
		-ms-animation-play-state:paused;
	}
	#musicBk a{
		display:block;
		margin-top:4px;
		position:absolute;
		left:4px;
	}
	.musicBk{
		background:url(img/play.jpg) center no-repeat;
		background-size:200px 200px;
		margin:0 auto;
		animation:myfirst 5s;
		-moz-animation:myfirst 5s;
		-webkit-animation:myfirst 5s;
		-o-animation:myfirst 5s;
		
		animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		
		animation-timing-function:linear;
		-moz-animation-timing-function:linear;
		-webkit-animation-timing-function:linear;
		-o-animation-timing-function:linear;
		
		animation-play-state:paused;
		-moz-animation-play-state:paused;
		-webkit-animation-play-state:paused;
		-o-animation-play-state:paused;
		-ms-animation-play-state:paused;
	}
	#music{
		margin-top:40px;
	}
	#divIntr{
		display:none;
	}
	#divIntr .ui-btn{
		outline:2px solid red;
		outline-offset:10px;
		outline-style:inherit;
	}
	.active{
		display:block !important;
	}
	@keyframes myfirst
	{
		0%{transform:rotate(0deg)}
		100%{transform:rotate(360deg)}	
	}
	@-moz-keyframes myfirst
	{
		0%{transform:rotate(0deg)}
		100%{transform:rotate(360deg)}	
	}
	@-webkit-keyframes myfirst
	{
		0%{transform:rotate(0deg)}
		100%{transform:rotate(360deg)}	
	}
	@-o-keyframes myfirst
	{
		0%{transform:rotate(0deg)}
		100%{transform:rotate(360deg)}	
	}


	
	@keyframes myTwo
	{
		0%{transform:rotate(360deg)}
		100%{transform:rotate(0deg)}	
	}
	@-moz-keyframes myTwo
	{
		0%{transform:rotate(360deg)}
		100%{transform:rotate(0deg)}	
	}
	@-webkit-keyframes myTwo
	{
		0%{transform:rotate(360deg)}
		100%{transform:rotate(0deg)}	
	}
	@-o-keyframes myTwo
	{
		0%{transform:rotate(360deg)}
		100%{transform:rotate(0deg)}	
	}


	#MySkill p>span{
		display:block;
		width:120px;
		text-align:right;
		margin-top:20px;
		font-family:"MicrosoftYaHei";
		font-style:normal;
		height:20px;
	}
	#MySkill p>span+span{
		display:block;
		height:10px;
		width:0px;
		position:relative;
		top:5px;
		border-radius:5em;
		-moz-border-radius:5em;
		-o--border-radius:5em;
		-webkit--border-radius:5em;
		
	}
	#MySkill p em{
		font-style:normal;
		position:relative;
		top:20px;
	}
	#MySkill p span{
		float:left;
	}
	#MySkill p{
		height:40px;
		position:relative;
		width:100%;
	}
	#MySkill{
		display:none;
		position:absolute;
	}
	#MyWork{
		display:none;
		text-align:left;
		}
	#MyBlog{
		display:none;
	}
</style>
</head>

<body>
	<div data-role="page">
    	<div data-role="header">
        	<h1></h1>
        </div>
    	<div data-role="content" id="page1Main">
          <p>历史总是惊人的相似,但不是简单的重复。</p>
          <a class="ui-btn ui-btn-icon-notext ui-corner-all page1MainKiss ui-shadow">从右向左滑动</a>				
          <a id="startmode" href="#page2" data-transition="slide"  data-role="button" data-inline="true" class="ui-btn ui-btn-inline ui-shadow ui-corner-all">Enter !</a>
        </div>
    </div>
    
    <div data-role="page" id="page2">
        <div data-role="panel" id="mypanel" data-position="right">
        	<div data-role="header">
                	<h1>几个案例</h1>
                </div>
        	<p><a href="http://yekelin.oschina.io/twoannniu/2Danniu/2Danniu.html" target="_blank">按钮特效</a></p>
            <p><a href="http://yekelin.oschina.io/twoannniu/BeePlaying/play.html" target="_blank">打蜜蜂小游戏</a></p>
            <p><a href="http://yekelin.oschina.io/twoannniu/waterfall/model.html" target="_blank">瀑布流图片</a></p>
            <p><a href="http://yekelin.oschina.io/twoannniu/Bubble/index.html" target="_blank">接气泡小游戏</a></p>
            <h1>更多的面试在带。</h1>
            <a href="#page12" data-rel="close" class="ui-btn ui-btn-icon-left ui-icon-delete">关闭面板</a>
        </div>
        <div data-role="header" >
        	<div data-role="navbar" >
                <ul id="navlist">
                    <li><a href="" class="ui-btn-active ui-state-persist ui-shadow ui-corner-all ui-page-theme-b">Music Play</a></li>
                    <li><a href="" class="ui-shadow ui-corner-all ui-page-theme-a">谋生技能</a></li>
                    <li><a href="" class="ui-shadow ui-corner-all">学历及工作经历</a></li>
                    <li><a href="" class="ui-shadow ui-corner-all">个人博客</a></li>
                    <li><a href="#mypanel" class="ui-shadow ui-corner-all">作品区</a></li>
                </ul>
            </div>
        </div>
        <div data-role="content" id="contentBox">
            <div id="divIntr" class="active">
                <!--START个人简介-->
                <p>边听音乐边看内容。</p>
                <img src="img/music.gif" alt=""/>
                <div id="musicBk-box">
                <div id="musicBk">
                    <a class="ui-btn ui-btn-icon-notext ui-corner-all musicBk ui-shadow">从右向左滑动</a>
                </div>
                </div>
                <audio controls id="music">
                  <source src="music/纯音乐-卡农.mp3" type="audio/mpeg" />
                  你的浏览器不支持audio标签。
                </audio>
                <!--END个人简介-->
            </div>
            <div id="MySkill">
                <!--START职业技能-->
                <div>
                  <p><span>JavaScript:</span><span class="js" style="background:red;"></span><em>0</em></p>
                  <p><span>HTML5+CSS3:</span><span class="hc" style="background:orange;"></span><em>0</em></p>
                  <p><span>jQuery:</span><span class="jq" style="background:yellow;"></span><em>0</em></p>
                  <p><span>C#:</span><span class="c" style="background:green;"></span><em>0</em></p>
                  <p><span>ASP.NET:</span><span class="asp" style="background:blue;"></span><em>0</em></p>
                  <p><span>Bootstrap:</span><span class="bs" style="background:Indigo;"></span><em>0</em></p>
                  <p><span>jQuery Mobile:</span><span class="jqm"  style="background:purple;"></span><em>0</em></p>
                  <p><span>SQL数据库:</span><span class="sql"  style="background:#c2393c;"></span><em>0</em></p>
                </div>
                <!--END职业技能-->
            </div>
            <div id="MyWork">
                <!--START工作经历-->
                <div data-role="header">
                	<h1>学历</h1>
                </div>
                <p>①2015.6 毕业于福建江夏学院 电子信息科学学院 计算机应用专科。目前的最高学历。</p>
                <p>②将来打算工作稳定之后，有机会的话还会考取更高的文凭。</p>
                <div data-role="header">
                	<h1>工作经历</h1>
                </div>
                <p>①2015.3~2015.5 在福建拓力软件公司实习 从事二次开发 职位是：程序员实习生 从事地点是晋江利郎男装总公司</p>
                <p>②2015.7~2016.8 在厦门快普软件有限公司 从事软件开发 职位是：软件研发工程师 从事地点是厦门软件园二期</p>
                <div data-role="header">
                	<h1>参与项目</h1>
                </div>
                <p>PM项目管理软件开发。(项目管理系统)</p>
                <p>RD项目管理软件开发。(研发管理系统)</p>
                <p>hr项目管理软件开发。(人力资源管理系统)</p>
                <p>移动端开发（使用的是CanApp）</p>
                <div data-role="header">
                	<h1>求职岗位</h1>
                </div>
                <p>前端开发</p>
                <!--END工作经历-->
            </div>
            <div id="MyBlog">
                <!--START个人博客-->
				<div data-role="header">
                	<h1>开源中国--blog</h1>
                </div>
                <p><a href="https://my.oschina.net/u/3212303/blog/821528" target="_blank">JavaScript复习</a></p>
                <p><a href="https://my.oschina.net/u/3212303/blog/821595" target="_blank">原 JavaScript HTML DOM 与js 对象 复习</a></p>
                <p>慢慢的更新中......</p>
                <!--END个人博客-->
            </div>
        </div>
    </div>
</body>
<script>
	$(document).ready(function(e) {
        var music=$("#music").get(0);//获取音频
		var musicBk_id=$("#musicBk").get(0);//获取动画
		var musicBk_class=$(".musicBk").get(0);//获取动画
		var startmode=$("#startmode").get(0);
		var navList=$("#navlist");//获取菜单
		var contentBox=$("#contentBox");//获取显示文件
		musicBk_class.onclick=function(){
			var state=musicBk_id.style.animationPlayState;
			console.log(state);
			if(state!="paused"){
				musicBk_id.style.animationPlayState="paused";
				musicBk_class.style.animationPlayState="paused";
				music.pause(); 
			}else{
				musicBk_id.style.animationPlayState="running";
				musicBk_class.style.animationPlayState="running";	
				music.play();	
			}
		}
		
		music.onended=function(){
			music.play();
		}
		startmode.onclick=function(){
			if(music.paused){
				music.pause();
				setTimeout(function(){
					music.play();	
					musicBk_id.style.animationPlayState="running";
					musicBk_class.style.animationPlayState="running";			
				},200);

			}
		}
		
		
		var js,hc,jq,c,asp,bs,jqm,jsv,hcv,jqv,cv,aspv,bsv,jqmv;
		js=$(".js");
		hc=$(".hc");
		jq=$(".jq");
		c=$(".c");
		asp=$(".asp");
		bs=$(".bs");
		jqm=$(".jqm");
		sql=$(".sql");
		
		kd=window.innerWidth-120;/*获取屏幕的宽度-文字说明的宽度=进度条的总长度*/
		
		jsv=70;/*js掌握程度*/
		hcv=70;/*html+css掌握程度*/
		jqv=70;/*jq掌握程度*/
		cv=70;/*c#掌握程度*/
		aspv=60;/*asp掌握程度*/
		bsv=50;/*bootstrap掌握程度*/
		jqmv=60;/*jq moblie掌握程度*/
		sqlv=60;/*数据库掌握情况*/
		
		var navListChildren=navList.children();
		var contentBoxChildren=contentBox.children();
		$.each(navListChildren,function(index,value){//遍历孩子结点数组添加点击事件。然后给对应的样式添加active类
			if(index==4){
				return false;	
			}
			this.onclick=function(){
					$.each(contentBoxChildren,function(a,b){
						$(contentBoxChildren.eq(a)).removeClass("active");
					});
					$(contentBoxChildren.eq(index)).addClass("active");
					if(index==1){
						console.log(kd);
						js.animate({width:(jsv/100)*kd},1000);
						hc.animate({width:(hcv/100)*kd},1000);
						jq.animate({width:(jqv/100)*kd},1000);
						c.animate({width:(cv/100)*kd},1000);
						asp.animate({width:(aspv/100)*kd},1000);
						bs.animate({width:(bsv/100)*kd},1000);
						jqm.animate({width:(jqmv/100)*kd},1000);
						sql.animate({width:(sqlv/100)*kd},1000);
						var i=0;
						var set=setInterval(function(){
							i++;
									if(jsv>=i)
										$(".js+em").text(i+"%");
									if(hcv>=i)
										$(".hc+em").text(i+"%");
									if(jqv>=i)
										$(".jq+em").text(i+"%");
									if(cv>=i)
										$(".c+em").text(i+"%");
									if(aspv>=i)
										$(".asp+em").text(i+"%");
									if(bsv>=i)
										$(".bs+em").text(i+"%");
									if(jqmv>=i)
										$(".jqm+em").text(i+"%");
									if(sqlv>=i)
										$(".sql+em").text(i+"%");
									if(i>100){
										clearInterval(set);
										set=null;
									}
								},10);
						
					}else{
						js.stop().css("width",0);
						hc.stop().css("width",0);
						jq.stop().css("width",0);
						c.stop().css("width",0);
						asp.stop().css("width",0);
						bs.stop().css("width",0);
						jqm.stop().css("width",0);
						sql.stop().css("width",0);
					}
				}
			}
		);
		
		
		
		
    });
</script>
</html>
